<template>
	<view class="px-2">
		<!-- 内容的上部分 -->
		<view class="py-2 flex align-center justify-between">
			<!-- 左边部分 -->
			<view class="top-left flex align-center justify-center">
				<!-- 头像 -->
				<image :src="item.userpic" lazy-load @click="openSpace"></image>
				<!-- 昵称和日期 -->
				<view class="top-left-word ml-2 flex flex-column">
					<text>{{item.username}}</text>
					<text>{{item.newstime}}</text>
				</view>
			</view>
			<!-- 右边部分 -->
			<!-- 按钮 -->
			<!-- 如果用户还未关注就显示关注 已关注按钮就隐藏 -->
			<view v-if="!item.isFllow" @click="follow"
				class="animate__animated faster top-right text-white bg-main rounded flex justify-center align-center"
				hover-class="animate__shakeY">
				关注
			</view>
		</view>
		<!-- 内容的中间 -->
		<!-- 标题 -->
		<view class="conten-mid" @click="openDetail">
			{{item.title}}
		</view>
		<!-- 图片 -->
		<view class="content-img mt-2">
			<!-- 如果titlepic存在就显示封面 -->
			<image v-if="item.titlepic" :src="item.titlepic" @click="openDetail"></image>
		</view>
		<!-- 内容的下部分 -->
		<!-- 点赞 -->
		<view class="content-bottom px-2 flex align-center justify-center mb-5">
			<view @click="doSupport('support')" class="flex-1 flex align-center justify-center animate__animated faster"
				hover-class="jello text-main" :class="item.support.type === 'support'?'support-active':''">
				<text class="iconfont icon-dianzan mr-2"></text>
				<text>{{item.support.support_count > 0 ? item.support.support_count : '顶'}}</text>
			</view>
			<!-- 踩 -->
			<view @click="doSupport('unsupport')"
				class="flex-1 flex align-center justify-center animate__animated faster" hover-class="jello text-main"
				:class="item.support.type === 'unsupport'?'support-active':''">
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : '踩'}}</text>
			</view>
			<!-- 评论 -->
			<view @click="openDetail" class=" flex-1 flex align-center justify-center animate__animated faster"
				hover-class="jello text-main">
				<text class="iconfont icon-tiezi mr-2"></text>
				<text>{{item.comment_count > 0 ? item.comment_count : '评论'}}</text>
			</view>
			<!-- 分享 -->
			<view @click="openDetail" class=" flex-1 flex align-center justify-center animate__animated faster"
				hover-class="jello text-main">
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{item.share_num > 0 ? item.share_num : '分享'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		/* 父向子组件传值 */
		props: {
			item: Object,
			index: Number
		},
		methods: {
			// 打开个人空间
			openSpace() {
				console.log('打开个人空间');
			},
			// 关注
			follow() {
				console.log('index',this.index)
				// 子组件向父组件传值
				//通知父组件
				this.$emit('fllow', this.index);
			},
			// 打开详情页
			openDetail() {
				console.log('详情页');
			},
			// 点赞和踩
			doSupport(type) {
				this.$emit('doSupport', {
					type: type,
					index: this.index
				})
			}

		}
	}
</script>

<style lang="scss">
	.support-active {
		color: rgb(253, 95, 107);
	}

	.content-img {
		image {
			width: 100%;
			height: 350rpx;
			border-radius: 25rpx;
		}
	}

	.top-right {
		width: 120rpx;
		height: 70rpx;

	}

	.top-left {
		.top-left-word {
			>text:last-child {
				color: #6D6D72;
				font-size: 14px;
				margin-top: 10rpx;
			}
		}

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
		}
	}
</style>
